/*
  学习目标：useState使用的三个注意事项和一个规范
*/
import React, { useState } from 'react';

export default function App() {
  // 1. useState是一个函数,可以调用多次, 声明多个变量
  // 2. useState可以声明任意数据
  const [count, setCount] = useState(100);
  const [msg, setMsg] = useState('hello React');
  const [isShow, setIsShow] = useState(true);
  const [list, setList] = useState([1, 2, 3]);
  const [person, setPerson] = useState({ name: 'zs', age: 18 });

  const [name, setName] = useState('zs');
  const [age, setAge] = useState(100);

  // 4. 规范写法: const [变量名， set+驼峰变量名] = useState(初始值)

  return (
    <>
      <h1>
        App - {count} - {msg}
      </h1>
      {list.map((item, index) => {
        return <div key={index}>{item}</div>;
      })}

      <h3>{person.name}</h3>

      {isShow && <h2>正常显示</h2>}
      <button
        onClick={() => {
          // ❌
          // count = count + 1;
          // ✅  3. 更新状态,还是新值覆盖旧值
          setCount(count + 1);
        }}
      >
        点我+1
      </button>
      <button onClick={() => setMsg(msg + '~')}>点我+~</button>
    </>
  );
}
